<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-03-18 11:30:14
 * @Descripttion: 
 -->
<div class="my_todo_list">
    <div nz-row nzGutter="5">
        <div nz-col nzSpan="5">
            <label nz-col nzSpan="10" class="label">起始日期：</label>
            <div nz-col nzSpan="14">
                <nz-date-picker nzDropdownClassName="date-range" [(ngModel)]="dateStart"
                    (ngModelChange)="onStart($event)"></nz-date-picker>
            </div>
        </div>
        <div nz-col nzSpan="5">
            <label nz-col nzSpan="10" class="label">结束日期：</label>
            <div nz-col nzSpan="14">
                <nz-date-picker nzDropdownClassName="date-range" [(ngModel)]="dateEnd" (ngModelChange)="onEnd($event)">
                </nz-date-picker>
            </div>
        </div>
        <div nz-col nzSpan="4">
            <label nz-col nzSpan="10" class="label">发起人：</label>
            <div nz-col nzSpan="14">
                <input nz-input placeholder="员工姓名/职位" [(ngModel)]="sender" />
            </div>
        </div>
        <div nz-col nzSpan="5">
            <label nz-col nzSpan="10" class="label">流程名称：</label>
            <div nz-col nzSpan="14">
                <input nz-input placeholder="流程名称" [(ngModel)]="processName" />
            </div>
        </div>
        <div nz-col nzSpan="5">
            <label nz-col nzSpan="10" class="label">流程状态：</label>
            <div nz-col nzSpan="14">
                <nz-select [(ngModel)]="processStatus" style="width: 100%;" nzDropdownClassName="select_custom">
                    <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                    <nz-option *ngFor="let item of statusList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                </nz-select>
            </div>
        </div>
    </div>
    <div nz-row class="table_row">
        <nz-table #rowSelectionTable [nzFrontPagination]="false" [nzData]="listOfAllData"
            (nzCurrentPageDataChange)="currentPageDataChange($event)" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                    <th>编号</th>
                    <th>流程编号</th>
                    <th>流程名称</th>
                    <th>时间</th>
                    <th>发起人</th>
                    <th>操作</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowSelectionTable.data">
                    <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
                    <td>{{ data.code }}</td>
                    <td>{{ data.processCode }}</td>
                    <td>{{ data.processName }}</td>
                    <td>{{ data.time }}</td>
                    <td>{{ data.sender }}</td>
                    <td class="operate_button">
                        <button nz-button nzType="primary" nzSize='small'>查看</button>
                        <button nz-button nzType="primary" nzSize='small'>完成</button>
                        <button nz-button nzType="primary" nzSize='small'>委托</button>
                    </td>
                    <td>{{ data.status }}</td>
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="page_row">
        <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="10" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 85 条 </ng-template>
    </div>
</div>